<template>
  <VDialog
    @close="handleClose"
    title="执行进度详情"
    width="1140"
    @save="save"
    :loading="loading"
    :disabled="true"
  >
    <template #content>
      <div>
        <vxe-grid v-bind="tableOptins" ref="delTableRef">
          <template #toolbar_buttons>
            <el-button @click="handleOperation"> 手动执行 </el-button>
          </template>
        </vxe-grid>
      </div>
    </template>
  </VDialog>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { transferDetail, transferRun } from "../api.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  id: { type: [Object, String, Number], default: null },
});
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
const loading = ref(false);
watch(
  () => props.id,
  (val) => {
    nextTick(() => {
      if (val) getDetail(val);
    });
  }
);
const getDetail = async (id) => {
  tableOptins.data = [];
  try {
    loading.value = true;
    const { data } = await transferDetail({ id });
    tableOptins.data = data || [];
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};
const tableOptins = reactive({
  rowConfig: { height: 52 },
  height: 400,
  toolbarConfig: {
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { type: "checkbox", width: "60" },
    { field: "type_desc", title: "执行类型", minWidth: "200" },

    {
      field: "status_desc",
      title: "执行状态",
      minWidth: "200",
    },
    { field: "start_time", title: "执行开始时间", minWidth: "200" },
    { field: "end_time", title: "执行结束时间", minWidth: "200" },
  ],
  data: [],
});
const delTableRef = ref();
const getSelectRow = () => {
  const getCheckboxRecords = delTableRef?.value.getCheckboxRecords();
  if (!getCheckboxRecords.length) {
    ElMessage({
      showClose: true,
      message: "请至少选择一条数据！",
      type: "warning",
    });
    return false;
  }
  const arr = [];
  getCheckboxRecords.map((e) => {
    arr.push(e.id);
  });
  return arr;
};
const handleOperation = () => {
  let id = getSelectRow();
  if (!id) return;
  proxy?.confirm({
    title: "提示",
    content: (
      <p>
        确认手动执行选中的
        <span class="text-[#3366F1] px-[4px]">{id.length || 1}</span>
        条数据？
      </p>
    ),
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        try {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = "处理中..";
          const { code, message } = await transferRun({ task_ids: id });
          if (code !== 200) return ElMessage.error(message);
          ElMessage.success("操作成功");
        } catch (e) {
          console.error(e);
        } finally {
          instance.confirmButtonLoading = false;
          done();
          getDetail(props.id);
        }
      } else {
        done();
      }
    },
  });
};
const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  // if (refresh) emit("refresh");
};
</script>
